<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/Ui/layui-v2.6.4/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/Ui/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/admin/css/login.css}">
    <title>login</title>
</head>
<body style="background:#7e9797!important;">
<div class="row">
    <div class="col-xs-4 col-xs-offset-4 formItems">
        <div style="margin-top: 10px;text-align: center">
            <span class="fontUser" style="font-size: 30px!important;">新用户注册</span>
        </div>


        <form class="layui-form" action="/register" method="post" style="height: 400px">
            <div class="layui-form-item ">
                <label class="layui-form-label">昵称：</label>
                <div class="layui-input-inline">
                    <input type="text" required name="userName" lay-reqtext="昵称是必填项，岂能为空？"
                           placeholder="请输入" autocomplete="off" class="layui-input input" onblur="f()" id="app">
                </div>
                <div class="layui-form-mid layui-word-aux" style="color: red!important;"
                     id="errMsg"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-inline">
                    <input type="password" lay-verify="pass" name="pwd" placeholder="请输入密码" autocomplete="off"
                           class="layui-input input" id="pwd">
                </div>
                <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认：</label>
                <div class="layui-input-inline">
                    <input type="password" lay-verify="pass" name="rePassword" placeholder="确认密码" autocomplete="off"
                           class="layui-input input" onblur="f1()" id="rePwd">
                </div>
                <div class="layui-form-mid layui-word-aux" style="color: red!important;"
                     id="pwds"></div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">电话：</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-verify="required|phone" name="phone" placeholder="请输入电话" autocomplete="off"
                           class="layui-input input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">生日：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd" name="birthday">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">邮件：</label>
                <div class="layui-input-inline">
                    <input type="text" lay-verify="email" name="email" placeholder="请输入邮件" autocomplete="off"
                           class="layui-input input">
                </div>
            </div>
            <div style="text-align: center">
                <input type="submit" lay-submit="" class="btn btn-info" lay-filter="demo2"
                       style="width: 100px;margin-top: 20px" value="提交">
            </div>
        </form>
    </div>
</div>
<script th:src="@{/../../../../Ui/editor/examples/js/jquery.min.js}"></script>
<script th:src="@{/Ui/layui-v2.6.4/layui/layui.js}"></script>
<script th:src="@{/Ui/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/Ui/layui-v2.6.4/jquery.js}"></script>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate;

        laydate.render({
            elem: '#test1'
        });

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 6) {
                    return '标题至少得6个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });


        //监听提交
        form.on('submit(demo1)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });
            return false;
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>
<script th:inline="javascript">
    function f() {
        $.get({
            url: "/queryName",
            data: {"name": $(app).val()},
            success: function (data) {
                if (data === "true") {
                    document.getElementById("errMsg").innerHTML = "此用户已存在";
                } else {
                    document.getElementById("errMsg").innerText = "";
                }
            }
        })
    }

</script>
<script>
    function f1() {
        const pwd = document.getElementById("pwd").value;
        const rePwd = document.getElementById("rePwd").value;
        if (pwd !== rePwd){
            document.getElementById("pwd").value ="";
            document.getElementById("rePwd").value ="";
            document.getElementById("pwds").innerHTML = "两次密码不一致";
        }else {
            document.getElementById("pwds").innerHTML = "";
        }

    }
</script>


</body>
</html>